import { fakeAvatars } from "@/_mock/utils";
import { Icon } from "@/components/icon";
import useLocale from "@/locales/use-locale";
import { Avatar, AvatarImage } from "@/ui/avatar";
import { Badge } from "@/ui/badge";
import { Button } from "@/ui/button";
import { Card, CardContent } from "@/ui/card";

/**
 * 团队标签页 - 志同道合者聚，同心协力共前行
 * 展现用户所属的各个团队与协作组织
 */
export default function TeamsTab() {
	const { t } = useLocale();
	// 团队列表 - 各路英雄，携手并进
	const items = [
		{
			icon: <Icon icon="logos:react" size={40} />,
			name: t("sys.pages.management.userProfile.reactDevelopers"),
			desc: "我们不对您的技术栈做任何假设，让您可以在React中开发新功能，如春风化雨般自然。",
			members: fakeAvatars(25),
			tags: ["React", "AntD"],
		},
		{
			icon: <Icon icon="logos:vue" size={40} />,
			name: t("sys.pages.management.userProfile.vueDevTeam"),
			desc: "Vue及其生态系统的发展由国际团队引领，群贤毕至，少长咸集。",
			members: fakeAvatars(20),
			tags: ["Vue.js", "开发者"],
		},
		{
			icon: <Icon icon="logos:figma" size={40} />,
			name: t("sys.pages.management.userProfile.figmaResources"),
			desc: "探索、安装、使用和重新混合设计师和开发者发布到Figma社区的数千个插件和文件，百花齐放。",
			members: fakeAvatars(45),
			tags: ["UI/UX", "Figma"],
		},
		{
			icon: <Icon icon="logos:html-5" size={40} />,
			name: t("sys.pages.management.userProfile.onlyBeginners"),
			desc: "学习网站工作的基础知识，前端与后端区别，以及代码编辑器的使用。学习基础HTML、CSS等技能，千里之行始于足下。",
			members: fakeAvatars(50),
			tags: ["CSS", "HTML"],
		},
		{
			icon: <Icon icon="logos:adobe-xd" size={40} />,
			name: t("sys.pages.management.userProfile.creativeDesigners"),
			desc: "设计或产品团队不仅仅是团队成员，还包括成员扮演的角色，如画龙点睛般精妙。",
			members: fakeAvatars(55),
			tags: ["Sketch", "XD"],
		},
	];
	return (
		<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
			{items.map((item) => (
				<Card key={item.name} className="flex w-full flex-col">
					<CardContent>
						<header className="flex w-full items-center">
							{item.icon}
							<span className="ml-4 text-xl opacity-70">{item.name}</span>

							<div className="ml-auto flex opacity-70">
								<Button variant="ghost" size="icon">
									<Icon icon="solar:star-line-duotone" size={18} />
								</Button>
								<Button variant="ghost" size="icon">
									<Icon icon="fontisto:more-v-a" size={18} />
								</Button>
							</div>
						</header>
						<main className="my-4 opacity-70">{item.desc}</main>
						<footer className="flex w-full items-center">
							{item.members.slice(0, 4).map((memberAvatar) => (
								<Avatar key={memberAvatar}>
									<AvatarImage src={memberAvatar} />
								</Avatar>
							))}
							<div className="ml-auto flex items-center gap-1">
								{item.tags.map((tag) => (
									<Badge key={tag} variant="info">
										{tag}
									</Badge>
								))}
							</div>
						</footer>
					</CardContent>
				</Card>
			))}
		</div>
	);
}
